<template>
  <div class="data-process">
    <div class="setting-card">
      <div class="card-header">数据处理</div>
      <div class="card-body">
        <el-row :gutter="10">
          <el-col :span="5">
            <select-list ref="selectProcessList" @selected="handleSelect" :useTitle="false" :height="235" :listData="processData">
              <template v-slot:toolItem>
                <div class="tool-item add-process">
                  <el-dropdown @command="handleCommand" trigger="click">
                    <icon-tip content="添加" eleIcon="el-icon-plus"></icon-tip>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="1">提取内容为空?</el-dropdown-item>
                      <el-dropdown-item :command="2">内容替换/排除</el-dropdown-item>
                      <el-dropdown-item :command="3">Html标签过滤</el-dropdown-item>
                      <el-dropdown-item :command="4">字符截取</el-dropdown-item>
                      <el-dropdown-item :command="5">纯正则替换</el-dropdown-item>
                      <el-dropdown @command="handleCommand">
                        <el-dropdown-item>数据转换</el-dropdown-item>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="6">将结果简转繁</el-dropdown-item>
                          <el-dropdown-item :command="7">将结果繁转简</el-dropdown-item>
                          <el-dropdown-item :command="8">自动转换为拼音</el-dropdown-item>
                          <el-dropdown-item :command="9">时间修正转化</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                      <el-dropdown @command="handleCommand">
                        <el-dropdown-item>智能提取</el-dropdown-item>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="10">提取第一张图片</el-dropdown-item>
                          <el-dropdown-item :command="11">智能提取时间</el-dropdown-item>
                          <el-dropdown-item :command="12">智能提取邮箱</el-dropdown-item>
                          <el-dropdown-item :command="13">智能提取手机号码</el-dropdown-item>
                          <el-dropdown-item :command="14">智能提取电话号码</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                      <el-dropdown @command="handleCommand">
                        <el-dropdown-item>高级功能</el-dropdown-item>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="15">自动摘要</el-dropdown-item>
                          <el-dropdown-item :command="16">自动分词</el-dropdown-item>
                          <el-dropdown-item :command="17">自动分类</el-dropdown-item>
                          <el-dropdown-item :command="18">HTTP请求</el-dropdown-item>
                          <el-dropdown-item :command="19">字符编码转换</el-dropdown-item>
                          <el-dropdown-item :command="20">同义词替换</el-dropdown-item>
                          <el-dropdown-item :command="21">空内容缺省值</el-dropdown-item>
                          <el-dropdown-item :command="22">内容加前缀</el-dropdown-item>
                          <el-dropdown-item :command="23">随机插入</el-dropdown-item>
                          <el-dropdown-item :command="24">运行C#代码</el-dropdown-item>
                          <el-dropdown-item :command="25">批量内容替换</el-dropdown-item>
                          <el-dropdown-item :command="26">统计标签字符串长度</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                      <el-dropdown-item :command="27" divided>补全单网址</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="tool-item" @click="deleteItem"><icon-tip content="删除" eleIcon="el-icon-close"></icon-tip></div>
                <div class="tool-item" @click="clearList"><icon-tip content="清空" eleIcon="el-icon-delete"></icon-tip></div>
                <div class="tool-item" @click="upMove"><icon-tip content="上移" eleIcon="el-icon-arrow-up"></icon-tip></div>
                <div class="tool-item" @click="downMove"><icon-tip content="下移" eleIcon="el-icon-arrow-down"></icon-tip></div>
              </template>
            </select-list>
            <div class="tool-btn" :class="currentItem.index === 28 ? 'active' : ''" @click="otherSelect(28)">文件下载</div>
            <div class="tool-btn" :class="currentItem.index === 29 ? 'active' : ''" @click="otherSelect(29)">内容过滤</div>
          </el-col>
          <el-col :span="19">
            <div class="setting-detail">
              <small-tip class="details-tips" v-slot:content v-if="JSON.stringify(currentItem) === '{}'">
                <i class="el-icon-info"></i>
                请点击左侧 + 加号选择添加数据处理方式<br />
                可添加多条, 上个步骤处理的结果作为下个步骤的参数.上下移动可以设置处理顺序
              </small-tip>
              <!-- 提取内容为空 -->
              <div v-if="currentItem.index === 1">
                <small-tip v-slot:content>如果提取内容为空, 则从原始地址中再次提取</small-tip>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div>
                      正则匹配内容:
                      <el-button type="text" size="mini">[参数]</el-button>
                      <el-button type="text" size="mini">(*)</el-button>
                      <el-button type="text" size="mini">(?&#60;content&#62;[\s\S]*?)</el-button>
                    </div>
                    <el-input type="textarea" resize="none" :rows="9"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      组合结果:
                      <el-button type="text" size="mini">[参数1]</el-button>
                      <el-button type="text" size="mini">[参数2]</el-button>
                      <el-button type="text" size="mini">[参数N]</el-button>
                    </div>
                    <el-input type="textarea" resize="none" :rows="9"></el-input>
                  </el-col>
                </el-row>
              </div>
              <!-- 替换/排除 -->
              <div v-if="currentItem.index === 2">
                <small-tip v-slot:content>若使用排除功能, 请将排除字符串替换成空字符串</small-tip>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div>
                      将字符串:
                      <el-button type="text" size="mini">[参数]</el-button>
                      <el-button type="text" size="mini">(*)</el-button>
                    </div>
                    <el-input type="textarea" resize="none" :rows="9"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      替换为:
                      <el-button type="text" size="mini">[参数1]</el-button>
                      <el-button type="text" size="mini">[参数N]</el-button>
                    </div>
                    <el-input type="textarea" resize="none" :rows="9"></el-input>
                  </el-col>
                </el-row>
              </div>
              <!-- HTML标签排除 -->
              <div v-if="currentItem.index === 3">
                <el-checkbox-group class="line-block">
                  <el-checkbox label="链接 <a"></el-checkbox>
                  <el-checkbox label="表格 <table"></el-checkbox>
                  <el-checkbox label="表格体 <tbody"></el-checkbox>
                  <el-checkbox label="表格行 <tr"></el-checkbox>
                  <el-checkbox label="单元 <td"></el-checkbox>
                  <el-checkbox label="段落 <p"></el-checkbox>
                  <el-checkbox label="字体 <font"></el-checkbox>
                  <el-checkbox label="层 <div"></el-checkbox>
                  <el-checkbox label="Span <span"></el-checkbox>
                  <el-checkbox label="图像 <img"></el-checkbox>
                  <el-checkbox label="脚本 <script"></el-checkbox>
                  <el-checkbox label="加粗 <b<strong"></el-checkbox>
                  <el-checkbox label="换行 <br"></el-checkbox>
                  <el-checkbox label="空格 &#38;nbsp;"></el-checkbox>
                  <el-checkbox label="H标签 <h1-7"></el-checkbox>
                  <el-checkbox label="hr标签 <hr>"></el-checkbox>
                  <el-checkbox label="表单 <form"></el-checkbox>
                  <el-checkbox label="框架 <frame"></el-checkbox>
                  <el-checkbox label="框架 <iframe"></el-checkbox>
                  <el-checkbox label="列表 <li<ul<dd<dt"></el-checkbox>
                  <el-checkbox label="换行 |Tab \r\n\t"></el-checkbox>
                  <el-checkbox label="去首尾空白字符"></el-checkbox>
                  <el-checkbox label="上下标 <sub<sup"></el-checkbox>
                  <el-checkbox label="其他标签 <*"></el-checkbox>
                  <el-checkbox label="所有标签 <"></el-checkbox>
                </el-checkbox-group>
              </div>
              <!-- 内容截取 -->
              <div v-if="currentItem.index === 4">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div>
                      开头字符串:
                      <el-button type="text" size="mini">(*)</el-button>
                    </div>
                    <el-input type="textarea" resize="none" :rows="9"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      结尾字符串:
                      <el-button type="text" size="mini">(*)</el-button>
                    </div>
                    <el-input type="textarea" resize="none" :rows="9"></el-input>
                  </el-col>
                </el-row>
              </div>
              <!-- 纯正则替换 -->
              <div v-if="currentItem.index === 5">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div>
                      正则表达式:
                    </div>
                    <el-input type="textarea" resize="none" :rows="9"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      替换表达式:
                    </div>
                    <el-input type="textarea" resize="none" :rows="9"></el-input>
                  </el-col>
                </el-row>
              </div>
              <!-- 时间修正 -->
              <div class="line-block" v-if="currentItem.index === 8">
                <div>
                  汉字转换为拼音后用分隔符 <el-input class="short-input" size="mini"></el-input> 连接
                </div>
                <div>
                  <el-radio-group>
                    <el-radio label="首字母大写"></el-radio>
                    <el-radio label="全部大写"></el-radio>
                    <el-radio label="全部小写"></el-radio>
                  </el-radio-group>
                </div>
                <div>
                  拼音结果最大长度 <el-input-number class="short-input" size="mini" :controls="false"></el-input-number>
                </div>
                <el-checkbox label="只获取首字母"></el-checkbox>
              </div>
              <!-- 将结果简转繁, 将结果繁转简, 时间修正 -->
              <div class="details-tips" v-if="[6, 7, 9, 10, 11, 12, 13, 14, 18, 27].indexOf(currentItem.index) !== -1">
                <small-tip v-slot:content>
                  <span v-if="currentItem.index === 6"><i class="el-icon-info"></i>  将简体中文转换成繁体中文</span>
                  <span v-if="currentItem.index === 7"><i class="el-icon-info"></i>  将繁体中文转换成简体中文</span>
                  <span v-if="currentItem.index === 9">
                    <i class="el-icon-info"></i>
                    将结果的时间进行修正准备时间 <br />
                    案例如下: <br />
                    昨天: 2019-04-23 <br />
                    今天: 2019-04-24 <br />
                    3小时前: 2019-04-24 13:21:51 <br />
                    8分钟前: 2019-04-24 16:13:51 <br />
                    40秒钟前: 2019-04-24 16:21:11
                  </span>
                  <span v-if="currentItem.index === 10"><i class="el-icon-info"></i>  提取当前内容的第一张图片</span>
                  <span v-if="currentItem.index === 11"><i class="el-icon-info"></i>  智能提取当前内容中的时间, 注意年份是4位数</span>
                  <span v-if="currentItem.index === 12"><i class="el-icon-info"></i>  智能提取当前内容中的邮箱</span>
                  <span v-if="currentItem.index === 13"><i class="el-icon-info"></i>  智能提取当前内容中的手机号码</span>
                  <span v-if="currentItem.index === 14"><i class="el-icon-info"></i>  智能提取当前内容中的电话号码</span>
                  <span v-if="currentItem.index === 18"><i class="el-icon-info"></i>  将当前内容当做一个网址进行请求, 并返回结果字符串</span>
                  <span v-if="currentItem.index === 27"><i class="el-icon-info"></i>  将当前内容当做一个网址进行补全</span>
                </small-tip>
              </div>
              <!-- 自动摘要 -->
              <div v-if="currentItem.index === 15">
                <div>
                  生成摘要时截取前 <el-input-number class="short-input" size="mini" :controls="false"></el-input-number> 字
                </div>
              </div>
              <!-- 自动分词 -->
              <div v-if="currentItem.index === 16">
                <div>
                  分词处理后用分隔符 <el-input class="short-input" size="mini"></el-input> 连接前 <el-input-number class="short-input" size="mini" :controls="false"></el-input-number> 个最高频词
                </div>
              </div>
              <!-- 自动分类 -->
              <div v-if="currentItem.index === 17">
                <div>关键词之间用 | 分隔, 一行一条记录</div>
                <el-input type="textarea" resize="none" :rows="10"></el-input>
                <div class="default-divide">
                  <el-checkbox label="找不到分类时使用默认值"></el-checkbox>
                  <el-input size="mini" class="medium-input"></el-input>
                </div>
              </div>
              <!-- 字符编码 -->
              <div class="line-block" v-if="currentItem.index === 19">
                <el-row class="row-align" :gutter="20">
                  <el-col :span="5">
                    <el-radio>URLEncode</el-radio>
                  </el-col>
                  <el-col :span="5">
                    <el-radio>URLDecode</el-radio>
                  </el-col>
                  <el-col :span="5">
                    <el-select size="mini">
                      <el-option label="GBK"></el-option>
                      <el-option label="UTF-8"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
                <el-row class="row-align" :gutter="20">
                  <el-col :span="5">
                    <el-radio>HTML Encode</el-radio>
                  </el-col>
                  <el-col :span="5">
                    <el-radio>HTML Decode</el-radio>
                  </el-col>
                  <el-col :span="5"></el-col>
                </el-row>
                <el-row class="row-align" :gutter="20">
                  <el-col :span="5">
                    <el-radio>To JS String</el-radio>
                  </el-col>
                  <el-col :span="5">
                    <el-radio>From JS String</el-radio>
                  </el-col>
                  <el-col :span="5"></el-col>
                </el-row>
                <el-row class="row-align" :gutter="20">
                  <el-col :span="5">
                    <el-radio>To Base64</el-radio>
                  </el-col>
                  <el-col :span="5">
                    <el-radio>From Base64</el-radio>
                  </el-col>
                  <el-col :span="5"></el-col>
                </el-row>
              </div>
              <!-- 同义词分组 -->
              <div class="line-block" v-if="currentItem.index === 20">
                <div>
                  <span>同义词分组:&nbsp;&nbsp;</span>
                  <el-select size="mini">
                    <el-option label="词库"></el-option>
                  </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
                  <el-button circle icon="el-icon-edit" size="mini" @click="synonymDialog = true"></el-button>
                  <el-dialog
                    title="同义词替换管理"
                    :visible.sync="synonymDialog"
                    :append-to-body="true"
                    width="800px">
                    <div class="synonym-dialog">
                      <el-row :gutter="10">
                        <el-col :span="9">
                          <select-list title="同义词列表">
                            <template v-slot:toolItem>
                              <div class="tool-item"><icon-tip content="添加" eleIcon="el-icon-plus"></icon-tip></div>
                              <div class="tool-item"><icon-tip content="删除" eleIcon="el-icon-close"></icon-tip></div>
                              <div class="tool-item"><icon-tip content="导入" eleIcon="el-icon-download"></icon-tip></div>
                              <div class="tool-item"><icon-tip content="打开同义词目录" eleIcon="el-icon-menu"></icon-tip></div>
                            </template>
                          </select-list>
                        </el-col>
                        <el-col :span="15">
                          <div class="synonym-title">同义词内容</div>
                          <el-input type="textarea" :rows="22" resize="none"></el-input>
                        </el-col>
                      </el-row>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="synonymDialog = false">取 消</el-button>
                      <el-button type="primary" @click="synonymDialog = false">确 定</el-button>
                    </span>
                  </el-dialog>
                </div>
                <div>
                  <el-checkbox label="双向替换"></el-checkbox>
                  <small-tip v-slot:content>(比如a, b两个词, 如果在内容中找到a, 则用b替换, 如果找到b, 则用a替换, 按先后次序替换)</small-tip>
                </div>
                <div>
                  <el-checkbox label="忽略Html标签内容"></el-checkbox>
                  <small-tip v-slot:content>(默认对于Html标签内的数据, 为防止对于文档格式造成影响, 不予替换)</small-tip>
                </div>
              </div>
              <!-- 空内容缺省值 -->
              <div v-if="currentItem.index === 21">
                <div>如果标签的值为空, 用以下的字符串作为缺省值</div>
                <el-input type="textarea" :rows="9" resize="none"></el-input>
              </div>
              <!-- 内容加前缀 -->
              <div v-if="currentItem.index === 22">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div>前字符串</div>
                    <el-input type="textarea" resize="none" :rows="8"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div>后字符串</div>
                    <el-input type="textarea" resize="none" :rows="8"></el-input>
                  </el-col>
                </el-row>
                <el-checkbox label="如果内容为空, 则不添加前后字符串"></el-checkbox>
              </div>
              <!-- 随机插入 -->
              <div class="line-block" v-if="currentItem.index === 23">
                <div>从一个文本文件中随机读取N行, 随机插入到标签内容里</div>
                <el-form label-width="150px">
                  <el-form-item label="文本文件: ">
                    <el-input class="medium-input" size="mini">
                    </el-input>
                    <label class="import-file" for="import-file">...</label>
                    <input id="import-file" type="file" style="display:none" accept=".txt">
                  </el-form-item>
                  <el-form-item label="每次读取: ">
                    <el-input-number class="medium-input" :controls="false" size="mini"></el-input-number>行
                  </el-form-item>
                  <el-form-item label="插入到指定字符串后:">
                    <el-input class="medium-input" size="mini"></el-input>
                    <small-tip v-slot:content>为防止HTML错误, 使用该功能前请关闭[不要插入到html标签内]</small-tip>
                  </el-form-item>
                  <el-checkbox label="允许读取的两行或多行连接到一块插入原内容"></el-checkbox>
                  <el-checkbox label="不要插入到html标签内"></el-checkbox>
                </el-form>
              </div>
              <!-- 运行C#代码 -->
              <div v-if="currentItem.index === 24">
                <div>
                  使用C#代码对数据进行处理, 调用Run方法
                  <el-dropdown size="mini" split-button type="primary">
                    语法测试
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>示例代码1</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <el-input type="textarea" resize="none" :rows="9"></el-input>
              </div>
              <!-- 批量内容替换 -->
              <div v-if="currentItem.index === 25">
                <div class="replace-block">
                  <el-row>
                    <el-col :span="12">
                      <el-input size="mini"></el-input>
                    </el-col>
                    <el-col :span="12">
                      <el-input size="mini"></el-input>
                    </el-col>
                    <el-col :span="24">
                      <el-button style="width: 100%;" size="mini" icon="el-icon-plus"></el-button>
                    </el-col>
                  </el-row>
                </div>
                <div class="replace-params">
                  <div>
                    可用标签:
                    <el-button type="text" size="mini">(*)</el-button>
                    <el-button type="text" size="mini">[参数]</el-button>
                  </div>
                  <div>
                    <el-button type="text" size="mini">[参数1]</el-button>
                    <el-button type="text" size="mini">[参数2]</el-button>
                    <el-button type="text" size="mini">[参数N]</el-button>
                    <el-button size="mini">浏览</el-button>
                  </div>
                </div>
              </div>
              <!-- 统计标签字符串 -->
              <div v-if="currentItem.index === 26">
                <div>统计当前标签字符串长度, 默认统计方式为: 中英文长度都按1计算</div>
                <el-checkbox label="中文长度按2计算"></el-checkbox>
              </div>
              <!-- 文件下载 -->
              <div v-if="currentItem.index === 28">
                <el-checkbox label="将相对地址补全为绝对地址"></el-checkbox>
                <el-checkbox label="下载图片"></el-checkbox>
                <el-checkbox label="探测文件真实地址但不下载"></el-checkbox>
                <el-checkbox label="探测文件并下载"></el-checkbox>
                <el-form class="default-divide" label-width="100px">
                  <el-form-item label="文件地址必含:">
                    <el-radio-group>
                      <el-radio>所有条件都必须满足</el-radio>
                      <el-radio>满足其中一个条件即可</el-radio>
                    </el-radio-group>
                    <el-input type="textarea" rows="3" resize="none"></el-input>
                  </el-form-item>
                  <el-form-item label="文件保存目录">
                    <div class="form-block">
                      <el-input size="mini"></el-input>
                      <el-dropdown trigger="click" @command="handleCommand">
                        <el-button circle icon="el-icon-edit" size="mini"></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="[文件扩展名]">[文件扩展名]</el-dropdown-item>
                          <el-dropdown-item command="[标签:XXX]">[标签:XXX]</el-dropdown-item>
                          <el-dropdown-item command="[任务名]">[任务名]</el-dropdown-item>
                          <el-dropdown-item command="[自增ID]">[自增ID]</el-dropdown-item>
                          <el-dropdown-item command="[年-yyyy]">[年-yyyy]</el-dropdown-item>
                          <el-dropdown-item command="[月-MM]">[月-MM]</el-dropdown-item>
                          <el-dropdown-item command="[日-dd]">[日-dd]</el-dropdown-item>
                          <el-dropdown-item command="[时-HH]">[时-HH]</el-dropdown-item>
                          <el-dropdown-item command="[分-mm]">[分-mm]</el-dropdown-item>
                          <el-dropdown-item command="[秒-ss]">[秒-ss]</el-dropdown-item>
                          <el-dropdown-item disabled divided>说明: 以上为下载文件重命名的格式, 可以组合使用</el-dropdown-item>
                          <el-dropdown-item disabled>字符d,M,y,g,h,H,m,s,f,t,z,F,K</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-form-item>
                  <el-form-item label="文件保存格式:">
                    <div class="form-block">
                      <el-input size="mini"></el-input>
                      <el-dropdown trigger="click" @command="handleCommand">
                        <el-button circle icon="el-icon-edit" size="mini"></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="[原文件名]">[原文件名]</el-dropdown-item>
                          <el-dropdown-item command="[随机文件名]">[随机文件名]</el-dropdown-item>
                          <el-dropdown-item command="[文件扩展名]">[文件扩展名]</el-dropdown-item>
                          <el-dropdown-item command="[标签:XXX]">[标签:XXX]</el-dropdown-item>
                          <el-dropdown-item command="[任务名]">[任务名]</el-dropdown-item>
                          <el-dropdown-item command="[自增ID]">[自增ID]</el-dropdown-item>
                          <el-dropdown-item command="[年-yyyy]">[年-yyyy]</el-dropdown-item>
                          <el-dropdown-item command="[月-MM]">[月-MM]</el-dropdown-item>
                          <el-dropdown-item command="[日-dd]">[日-dd]</el-dropdown-item>
                          <el-dropdown-item command="[时-HH]">[时-HH]</el-dropdown-item>
                          <el-dropdown-item command="[分-mm]">[分-mm]</el-dropdown-item>
                          <el-dropdown-item command="[秒-ss]">[秒-ss]</el-dropdown-item>
                          <el-dropdown-item disabled divided>说明: 以上为下载文件重命名的格式, 可以组合使用</el-dropdown-item>
                          <el-dropdown-item disabled>字符d,M,y,g,h,H,m,s,f,t,z,F,K</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 内容过滤 -->
              <div v-if="currentItem.index === 29">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div>内容不得包含:</div>
                    <el-input type="textarea" resize="none" :rows="8"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      内容必须包含:
                      <el-radio-group>
                        <el-radio>所有条件必须满足</el-radio>
                        <el-radio>满足其中一个条件即可</el-radio>
                      </el-radio-group>
                    </div>
                    <el-input type="textarea" resize="none" :rows="8"></el-input>
                  </el-col>
                </el-row>
                <div class="default-divide">
                  <el-checkbox label="采集结果不得为空"></el-checkbox>
                  <el-checkbox label="采集结果不得重复"></el-checkbox>
                  <el-checkbox label="当内容长度"></el-checkbox>
                  <el-select size="mini" class="short-input select">
                    <el-option label="大于"></el-option>
                    <el-option label="小于"></el-option>
                    <el-option label="等于"></el-option>
                    <el-option label="不等于"></el-option>
                  </el-select>
                  <el-input-number size="mini" class="short-input" :controls="false"></el-input-number>时过滤
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import SelectList from './SelectList.vue'
import IconTip from '@/components/IconTip.vue'
import SmallTip from '@/components/SmallTip.vue'

export default {
  name: 'DataProcess',
  components: {
    SelectList,
    IconTip,
    SmallTip
  },
  data () {
    return {
      synonymDialog: false, // 同义词弹框
      currentItem: {}, // 当前选中的处理方式
      processData: [], // 处理方式列表
      processObj: {
        1: {
          index: 1,
          name: '提取内容为空?',
          data: {}
        },
        2: {
          index: 2,
          name: '内容替换/排除',
          data: {}
        },
        3: {
          index: 3,
          name: 'Html标签过滤',
          data: {}
        },
        4: {
          index: 4,
          name: '字符截取',
          data: {}
        },
        5: {
          index: 5,
          name: '纯正则替换',
          data: {}
        },
        6: {
          index: 6,
          name: '将结果简转繁',
          data: {}
        },
        7: {
          index: 7,
          name: '将结果繁转简',
          data: {}
        },
        8: {
          index: 8,
          name: '自动转换为拼音',
          data: {}
        },
        9: {
          index: 9,
          name: '时间修正转化',
          data: {}
        },
        10: {
          index: 10,
          name: '提取第一张图片',
          data: {}
        },
        11: {
          index: 11,
          name: '智能提取时间',
          data: {}
        },
        12: {
          index: 12,
          name: '智能提取邮箱',
          data: {}
        },
        13: {
          index: 13,
          name: '智能提取手机号码',
          data: {}
        },
        14: {
          index: 14,
          name: '智能提取电话号码',
          data: {}
        },
        15: {
          index: 15,
          name: '自动摘要',
          data: {}
        },
        16: {
          index: 16,
          name: '自动分词',
          data: {}
        },
        17: {
          index: 17,
          name: '自动分类',
          data: {}
        },
        18: {
          index: 18,
          name: 'HTTP请求',
          data: {}
        },
        19: {
          index: 19,
          name: '字符编码转换',
          data: {}
        },
        20: {
          index: 20,
          name: '同义词替换',
          data: {}
        },
        21: {
          index: 21,
          name: '空内容缺省值',
          data: {}
        },
        22: {
          index: 22,
          name: '内容加前缀',
          data: {}
        },
        23: {
          index: 23,
          name: '随机插入',
          data: {}
        },
        24: {
          index: 24,
          name: '运行C#代码',
          data: {}
        },
        25: {
          index: 25,
          name: '批量内容替换',
          data: {}
        },
        26: {
          index: 26,
          name: '统计标签字符串长度',
          data: {}
        },
        27: {
          index: 27,
          name: '补全单网址',
          data: {}
        }
      } // 处理方式对应对象
    }
  },
  methods: {
    handleCommand (v) {
      const obj = JSON.parse(JSON.stringify(this.processObj[v]))
      obj.id = `${obj.index}-${this.processData.length}`
      this.processData.push(obj)
      this.currentItem = obj
      this.$refs.selectProcessList.selected = obj.id
    },
    deleteItem () {
      const index = this.processData.findIndex(v => v.id === this.$refs.selectProcessList.selected)
      if (index !== -1) {
        this.processData.splice(index, 1)
        this.currentItem = {}
      }
    },
    clearList () {
      this.$confirm('确定要清空?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.processData = []
        this.currentItem = {}
      }).catch(() => {
      })
    },
    upMove () {
      const index = this.processData.findIndex(v => v.id === this.$refs.selectProcessList.selected)
      if (index === 0) return
      [this.processData[index - 1], this.processData[index]] = [this.processData[index], this.processData[index - 1]]
      this.processData = JSON.parse(JSON.stringify(this.processData)) // 强制刷新
    },
    downMove () {
      const index = this.processData.findIndex(v => v.id === this.$refs.selectProcessList.selected)
      if (index === this.processData.length - 1 || this.processData.length === 1) return
      [this.processData[index], this.processData[index + 1]] = [this.processData[index + 1], this.processData[index]]
      this.processData = JSON.parse(JSON.stringify(this.processData)) // 强制刷新
    },
    handleSelect (v) {
      this.currentItem = v
    },
    otherSelect (num) {
      if (num === 28) {
        this.currentItem = {
          index: 28,
          name: '文件下载',
          data: {}
        }
      } else if (num === 29) {
        this.currentItem = {
          index: 29,
          name: '内容过滤',
          data: {}
        }
      }
    }
  }
}
</script>
<style lang="scss">
.el-message-box__wrapper {
  z-index: 9999 !important;
}
.data-process {
  padding: 0 20px 20px;
  .setting-card {
    margin-top: 10px;
    border: 1px solid #dfdfdf;
    .card-header {
      padding: 5px 20px;
      border-bottom: 1px solid #ebeef5;
      .card-header-filter {
        margin-left: 20px;
      }
    }
    .card-body {
      height: 300px;
      padding: 10px;
      .tool-btn {
        padding: 5px 20px;
        border: 1px solid #dfdfdf;
        cursor: pointer;
        &:hover {
          background: #dfdfdf;
        }
        &.active {
          background: #fedf7b;
        }
      }
      .add-process {
        position: relative;
      }
    }
  }
  .setting-detail {
    height: 300px;
    padding-top: 20px;
    box-sizing: border-box;
    .line-block {
      line-height: 4;
      .el-form-item {
        margin-bottom: 0;
      }
    }
    .details-tips {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .short-input {
      width: 50px;
      &.select {
        width: 85px;
      }
    }
    .medium-input {
      width: 200px;
    }
    .default-divide {
      margin-top: 10px;
    }
    .row-align {
      display: flex;
      align-items: center;
    }
    .import-file {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #FFF;
      border: 1px solid #DCDFE6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      -webkit-transition: .1s;
      transition: .1s;
      font-weight: 500;
      padding: 7px 15px;
      font-size: 12px;
      border-radius: 3px;
    }
    .replace-block {
      height: 240px;
      overflow-y: hidden;
      background: #dfdfdf;
    }
    .replace-params {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .form-block {
      display: flex;
    }
  }
}
.synonym-dialog {
  .synonym-title {
    padding: 5px 0;
    text-align: center;
    background: #dfdfdf;
  }
}
</style>
